<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
        action 数据提交的地址  (后端接口/同服务器的其他页面)

        method = "get/post"

        以get方式提交数据时, 会将参数数据队列,提交到action所指的url,和url以?分隔

        参数数据 => 表单提交的单项数据(键值对的形式存在)   键名=>对应的name属性值  键值:输入框的值    user=a123123
        参数数据队列 => 所有表单数据的集合  user=a123123&pwd=123123
     -->
     <form action="./01 JSON对象.html" method="get" class="box" >
        <p>
            <label for="">用户名:</label>
            <input type="text" name="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" name="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </form>
</body>
<script>

    // ajax背景
    // 以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来

    // 什么是Ajax？
    // 是指一种创建交互式网页应用的网页开发技术。  (常用于前后端交互)
    // - AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）
    // - 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
    // - XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
    // - 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

    // 特征: 
    // 当前页面不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来  =>   在不提交整个页面的情况下,实现页面的局部刷新;


    // 学习ajax  => 前后端交互  => 服务器环境(前端 后端)
    // 1. 学习ajax 要依赖于服务器环境  => live server打开 (vscode的插件 -> 本地起一个服务器 -> 只能做前端页面展示(站点),没有后端)
    
    // a. 自己学 => nodejs
    // b. 用别人已经写好的  (请求别人服务器的后端 -> 只要别人允许)
    // c. ajax也可以请求同服务下的其他文件 (json 文本文件)  => 返回文件内的文本  (今天做练习用)

    



</script>
</html>